<template>
	<div> 
  <el-table
	v-loading="tableData.length==0"
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%">
    <el-table-column
      label="图片编号"
      prop="id">
    </el-table-column>
	<el-table-column
	  label="上传时间"
	  prop="createdTime">
	</el-table-column>
    <el-table-column
      label="图片地址"
      prop="bannerUrl">
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
<!--        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/> -->
		  <el-button
		  style="margin-bottom: 3px;"
		    size="mini"
			type="primary"
		    @click="addBanner()">Add remote address</el-button>
			<el-button
			  size="mini"
						type="primary"
			  @click="addBannerFile()">Add image file</el-button>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table> 
        <transition name="el-zoom-in-bottom ">
		  <div v-show="isfileadd" class="fileaddbox">
			<el-upload
			  class="upload-demo"
			  drag
			  action="https://localhost:8081/banner/uploadfile"
			  multiple>
			  <i class="el-icon-upload"></i>
			  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
			  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
			</el-upload>
		  </div>
		  </transition>
	  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
		isfileadd:false
	 
      }
    },
	created(){
		this.getBanner();
	},
    methods: {
		addBannerFile(){
			 this.isfileadd = !this.isfileadd
		},
		getBanner(){
			let _this = this
			_this.$axios.post("/banner").then(res => {  
				_this.tableData = res.data.data 
				_this.tableData.map((item)=>{
					let time = item.createdTime.replace(/T/g,' ')
					let date = new Date(time);
					item.createdTime = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
				})
			})
		},
      handleEdit(index, row) {
        // console.log(index, row);
		this.$prompt('请输入需要更新的地址', '编辑轮播图', {
				 confirmButtonText: '确定',
				 cancelButtonText: '取消',		        
			   }).then(({ value }) => {
						  let _this = this;
						  let data = {
							  id:row.id,
							  bannerUrl:value,
							  createdTime:new Date(row.createdTime)
							};
						  _this.$axios.post('/banner/edit/',data).then(res => {  
							_this.$message({
							  message: "修改成功",
							  type: 'success'
							});
							_this.tableData.splice(index,1,data)
						  })  
			   });
		
      },
      handleDelete(index, row) {
        // console.log(index, row.id);
		this.$confirm('此操作将永久删除轮播图, 是否继续?', '删除轮播图', {
		         confirmButtonText: '确定',
		         cancelButtonText: '取消',
		         type: 'warning'
		       }).then(() => {
						let _this = this;
						this.$axios.post('/banner/del/' + row.id).then(res => {  
							_this.$message({
							  message: "删除成功",
							  type: 'success'
							});
							_this.tableData.splice(index,1)
						}) 
		       }).catch(() => {
		         this.$message({
		           type: 'info',
		           message: '已取消删除'
		         });          
		       }); 
      },
	  addBanner(){
		  this.$prompt('请输入轮播图远程地址', '添加轮播图', {
		            confirmButtonText: '确定',
		            cancelButtonText: '取消',		        
		          }).then(({ value }) => {
					  let _this = this;
					  let data = {
						  id:_this.tableData.length+1,
						  bannerUrl:value,
						  createdTime:new Date()
						};
					  _this.$axios.post('/banner/add/',data).then(res => {  
					  	_this.$message({
					  	  message: "添加成功",
					  	  type: 'success'
					  	});
					  	_this.tableData.splice(_this.tableData.length,1,data)
					  })  
		          });
				  
		 //  this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
			// dangerouslyUseHTMLString: true
		 //  });
	  },
	
    },
  }
</script>

<style scoped>
	.fileaddbox{
		position: fixed;
		bottom: 1vh;
		left: 20vw;
		z-index: 99;
		background-color: #fafafa;
 
	}
	 
</style>
